<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>用户登录</title>
		<style>
			/* 设置整个页面容器的高度 */
			html,
			body,
			#app {
				height: 100%;
			}

			/* 清除body四周的8px外边距 */
			body {
				margin: 0;
			}

			/* 整个页面的最大的区块（页面容器） */
			#app {
				background-color: #2d3a4b;
				/* 显示为flex弹性容器，这样便于控制内部的元素的排列和布局 */
				display: flex;
				/* 内部的元素水平居中 */
				justify-content: center;
				/* 内部的元素垂直居中 */
				align-items: center;
			}

			h2 {
				/* 清除二级标题顶部的外边距 */
				margin-top: 0;
				color: white;
			}

			/* 所有的元素，宽度由我们自己掌控，我们说width是多少，它就是多少 */
			* {
				box-sizing: border-box;
			}

			/* 正中间的login区块 */
			.login {
				width: 500px;
			}

			.row {
				margin-bottom: 15px;
			}

			input {
				width: 100%;
				padding: 10px;
				/* 边框：1像素，实线，XX色 */
				border: 1px solid #394453;
				background-color: #283443;
				color: white;
			}
			button {
				width: 100%;
				background-color: #66b1ff;
				height: 38px;
				border: none;
				color: white;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<!-- 整个页面区块 -->
		<div id="app">
			<!-- 正中间的区块 -->
			<div class="login">
				<h2>用户登录</h2>
				<div class="row">
					<input type="text" placeholder="用户名" />
				</div>
				<div class="row">
					<input type="password" placeholder="密码" />
				</div>
				<div class="row">
					<button>登 录</button>
				</div>
			</div>
		</div>
	</body>
</html>
